<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu
          active-text-color="#1890ff"
          background-color="#fff"
          text-color="#333"
          router
          class="custom-menu"
      >
        <el-menu-item index="/workBench/AdminIndex">
          <el-icon>
            <Management />
          </el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/housesResoures/HousesManagementlist">
          <el-icon>
            <House />
          </el-icon>
          <span>房源管理</span>
        </el-menu-item>
        <el-menu-item index="/buyHouses/BuyHouseslist">
          <el-icon>
            <SoldOut />
          </el-icon>
          <span>买房管理</span>
        </el-menu-item>
        <el-menu-item index="/RentingHouses/RentingHouseslist">
          <el-icon>
            <OfficeBuilding />
          </el-icon>
          <span>租房管理</span>
        </el-menu-item>
        <el-menu-item index="/userManagement/UserManagementlist">
          <el-icon>
            <Avatar />
          </el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/noticeManagement/NoticeManagementlist">
          <el-icon>
            <Bell />
          </el-icon>
          <span>通知管理</span>
        </el-menu-item>
        <el-menu-item index="/financialManagement/FinancialManagementlist">
          <el-icon>
            <Money />
          </el-icon>
          <span>财务管理</span>
        </el-menu-item>
        <el-menu-item index="/contractDelegation/ContractelegationAdmList">
          <el-icon>
            <Message />
          </el-icon>
          <span>预约管理</span>
        </el-menu-item>
        <el-sub-menu>
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>个人中心</span>
          </template>
          <el-menu-item index="/user/info">
            <el-icon>
              <User />
            </el-icon>
            <span>基本资料</span>
          </el-menu-item>
          <el-menu-item index="/user/avatar">
            <el-icon>
              <Crop />
            </el-icon>
            <span>更换头像</span>
          </el-menu-item>
          <el-menu-item index="/user/resetPassword">
            <el-icon>
              <EditPen />
            </el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header class="admin-header">
        <div>管理员：<strong>{{ userInfoStore.info.nickname }}</strong></div>
        <el-dropdown placement="bottom-end" @command="handleCommand">
          <span class="el-dropdown__box">
            <el-avatar :src="userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar" />
            <el-icon>
              <CaretBottom />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
              <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
              <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
              <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/" class="admin-breadcrumb">
        <el-breadcrumb-item
            v-for="(item, index) in breadcrumbItems"
            :key="index"
            :to="item.link"
        >
          {{ item.text }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 中间区域 -->
      <el-main class="admin-main">
        <router-view></router-view>
      </el-main>
      <!-- 底部区域 -->
      <el-footer class="admin-footer">慧家房产中介系统 ©2025 Created by 栗子</el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import {
  Message,
  Management,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
  House,
  SoldOut,
  OfficeBuilding,
  Avatar,
  Bell,
  Money
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
// 导入接口函数
import { userInfoGetService } from '@/api/user.js'
// 导入pinia
import { useUserInfoStore } from '@/stores/userinfo.js'

const userInfoStore = useUserInfoStore()

import { ref, watch } from 'vue'

// 获取个人信息
const getUserInf = async () => {
  let result = await userInfoGetService()
  // 存储pinia
  userInfoStore.setInfo(result.res)
}
getUserInf()

// 条目点击
// dropDown条目被点击后，回调的函数
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore()
const router = useRouter()
const route = useRoute()
const handleCommand = (command) => {
  if (command === 'logout') {
    // 退出登录
    ElMessageBox.confirm(
        '你确认退出登录码？',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
    )
        .then(async () => {
          // 用户点击了确认
          // 清空pinia中的token和个人信息
          userInfoStore.removeInfo()
          tokenStore.removeToken()
          // 跳转到登录页
          router.push('/')
          ElMessage({
            type: 'success',
            message: '退出成功'
          })
        })
        .catch(() => {
          // 用户点击了取消
          ElMessage({
            type: 'info',
            message: '取消退出'
          })
        })
  } else {
    // 路由
    router.push('/user/' + command)
  }
}

// 生成面包屑导航数据
const getBreadcrumbItems = () => {
  const items = []
  if (route.name === 'housesItemDetail') {
    return [
      { text: '首页', link: '/workBench/AdminIndex' },
      { text: '房源管理', link: '/housesResoures/HousesManagementlist' },
      { text: '房源详情' }
    ]
  }
  if (route.name === 'housesItemDetailBuy') {
    return [
      { text: '首页', link: '/workBench/AdminIndex' },
      { text: '买房管理', link: '/buyHouses/BuyHouseslist' },
      { text: '房源详情' }
    ]
  }
  if (route.name === 'housesItemDetailRes') {
    return [
      { text: '首页', link: '/workBench/AdminIndex' },
      { text: '租房管理', link: '/RentingHouses/RentingHouseslist' },
      { text: '房源详情' }
    ]
  }
  if (route.path === '/workBench/AdminIndex') {
    items.push({ text: '首页', link: '/workBench/AdminIndex' })
  } else if (route.path.includes('/housesResoures/HousesManagementlist')) {
    items.push({ text: '首页', link: '/workBench/AdminIndex' })
    items.push({ text: '房源管理', link: '/housesResoures/HousesManagementlist' })
  } else if (route.path.includes('/buyHouses/BuyHouseslist')) {
    items.push({ text: '首页', link: '/workBench/AdminIndex' })
    items.push({ text: '买房管理', link: '/buyHouses/BuyHouseslist' })
  } else if (route.path.includes('/RentingHouses/RentingHouseslist')) {
    items.push({ text: '首页', link: '/workBench/AdminIndex' })
    items.push({ text: '租房管理', link: '/RentingHouses/RentingHouseslist' })
  } else if (route.path.includes('/userManagement/UserManagementlist')) {
    items.push({ text: '首页', link: '/workBench/AdminIndex' })
    items.push({ text: '用户管理', link: '/userManagement/UserManagementlist' })
  } else if (route.path.includes('/noticeManagement/NoticeManagementlist')) {
    items.push({ text: '首页', link: '/workBench/AdminIndex' })
    items.push({ text: '通知管理', link: '/noticeManagement/NoticeManagementlist' })
  } else if (route.path.includes('/financialManagement/FinancialManagementlist')) {
    items.push({ text: '首页', link: '/workBench/AdminIndex' })
    items.push({ text: '财务管理', link: '/financialManagement/FinancialManagementlist' })
  } else if (route.path.includes('/user/')) {
    items.push({ text: '首页', link: '/workBench/AdminIndex' })
    items.push({ text: '个人中心', link: null })
    if (route.path.includes('/user/info')) {
      items.push({ text: '基本资料', link: '/user/info' })
    } else if (route.path.includes('/user/avatar')) {
      items.push({ text: '更换头像', link: '/user/avatar' })
    } else if (route.path.includes('/user/resetPassword')) {
      items.push({ text: '重置密码', link: '/user/resetPassword' })
    }
  }
  return items
}

const breadcrumbItems = ref(getBreadcrumbItems())

// 监听路由变化，更新面包屑导航
watch(() => route.path, () => {
  breadcrumbItems.value = getBreadcrumbItems()
})
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  display: flex;
  background-color: #f5f5f5;
}

.el-aside {
  background-color: #fff;
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
  transition: width 0.3s ease;

  &__logo {
    height: 120px;
    background: url('@/assets/logoTop.png') no-repeat center / 120px auto;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
    animation: glow 2s infinite alternate;
  }

  .custom-menu {
    border-right: none;

    .el-menu-item,
    .el-sub-menu__title {
      transition: background-color 0.3s ease, transform 0.3s ease;

      &:hover {
        background-color: #f0f0f0;
        transform: translateX(5px);
        box-shadow: inset 5px 0 0 rgba(24, 144, 255, 0.3);
      }
    }

    .el-menu-item.is-active {
      background-color: #e6f7ff;
      color: #1890ff;
      box-shadow: inset 5px 0 0 rgba(24, 144, 255, 0.3);
    }
  }
}

.admin-header {
  background: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  .el-dropdown__box {
    display: flex;
    align-items: center;
    color: #333;

    .el-icon {
      margin-left: 10px;
    }

    &:active,
    &:focus {
      outline: none;
    }
  }
}

.admin-breadcrumb {
  padding: 10px 20px;
  background-color: #fff;
  color: #333;
  font-weight: bold;

  .el-breadcrumb-item {
    &:hover a {
      text-decoration: underline;
      color: #1890ff;
    }
  }
}

.admin-main {
  padding: 20px;
  background-color: #fff;
  color: #333;
  flex: 1;
  overflow-y: auto;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
}

.admin-footer {
  background: #fff;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@keyframes glow {
  from {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
  }
  to {
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
  }
}
</style>
